<template>
    <div class="page-container">
        <el-card>
            <template #header>
                <div class="card-header">
                    <span>交割单查询</span>
                </div>
            </template>

            <div class="search-container">
                <el-input v-model="searchOrderId" placeholder="请输入主订单ID进行查询" class="search-input">
                    <template #append>
                        <el-button @click="fetchSettlements" :loading="loading" :icon="Search"></el-button>
                    </template>
                </el-input>
            </div>

            <el-table :data="settlements" v-loading="loading" style="width: 100%" border>
                <el-table-column prop="id" label="交割ID" width="100"></el-table-column>
                <el-table-column prop="orderDetailId" label="订单明细ID" width="120"></el-table-column>
                <el-table-column prop="settledAmount" label="成交金额" width="150">
                    <template #default="scope">{{ scope.row.settledAmount.toFixed(2) }}</template>
                </el-table-column>
                <el-table-column prop="settledShares" label="成交份额" width="180">
                    <template #default="scope">{{ scope.row.settledShares.toFixed(4) }}</template>
                </el-table-column>
                <el-table-column prop="fee" label="手续费" width="120">
                    <template #default="scope">{{ scope.row.fee.toFixed(2) }}</template>
                </el-table-column>
                <el-table-column prop="success" label="是否成功" width="100">
                    <template #default="scope">
                        <el-tag :type="scope.row.success ? 'success' : 'danger'">
                            {{ scope.row.success ? '是' : '否' }}
                        </el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="failureReason" label="失败原因" show-overflow-tooltip></el-table-column>
                <el-table-column prop="createdAt" label="交割时间" width="180">
                    <template #default="scope">{{ new Date(scope.row.createdAt).toLocaleString() }}</template>
                </el-table-column>
            </el-table>
            <el-empty v-if="!loading && settlements.length === 0" description="暂无数据，请输入订单ID进行查询"></el-empty>
        </el-card>
    </div>
</template>

<script setup>
import { ref } from 'vue';
import { ElMessage } from 'element-plus';
import axios from 'axios';
import { Search } from '@element-plus/icons-vue';

const settlements = ref([]);
const loading = ref(false);
const searchOrderId = ref('');

const tradeApi = {
    getSettlementsByOrderId: (orderId) => axios.get(`/api/settlements?orderId=${orderId}`),
};

const fetchSettlements = async () => {
    if (!searchOrderId.value) {
        ElMessage.warning('请输入要查询的订单ID。');
        return;
    }
    loading.value = true;
    settlements.value = []; // 清空旧数据
    try {
        const response = await tradeApi.getSettlementsByOrderId(searchOrderId.value);
        settlements.value = response.data;
        if (response.data.length === 0) {
            ElMessage.info('未找到该订单的交割记录。');
        }
    } catch (error) {
        ElMessage.error('查询交割单失败: ' + (error.response?.data?.message || error.message));
    } finally {
        loading.value = false;
    }
};
</script>

<style scoped>
.page-container {
    padding: 20px;
}

.card-header {
    font-size: 18px;
    font-weight: bold;
}

.search-container {
    margin-bottom: 20px;
    display: flex;
    justify-content: center;
}

.search-input {
    max-width: 500px;
}
</style>